import {
    forwardRef, useEffect, useImperativeHandle, useState,
} from 'react';
import { Form, Col, Row, Input } from 'antd';
import { InnerComp } from '@/components/ProTableComp/components/SearchComp';

import "./index.less";

export interface formListProps {
    name: any;
    label: any;
    rules?: any;
    hr?: string;
    valueType?: 'text' | 'password' | 'money' | 'digit' | 'date' | 'datetime' | 'dateRange' | 'datetimeRange' | 'time' | 'cascader' | 'number'
        | 'timeRange' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'switch' | 'rate' | 'progress' | 'percent' | 'option' | 'upload' | 'search'
        | 'index' | 'indexBorder' | 'optionButton' | 'moneyRange' | 'checkboxChildren'
        | 'user'; // 接口的类型的
    placeholder?: string;
    options?: any;
    span?: number | string;
    formProps?: any;
    onChange?: any;
    required?: boolean;
    hidden?: boolean;
    initialValue?: any;
    defaultValue?: any;
    assistant?: any; // 渲染出一个空位占位 可以通过 form.setFieldsValue 设置进去。
}

export interface formConfigProps {
    title?: string;
    description?: string;
    span?: number;
    formList?: formListProps[];
}

export interface Props {
    formConfig: formConfigProps[];
}

const FormTitle = (props: any) => {
    const { title, description } = props;
    return (
        <div className="form-title">
            { title ? <h3>{title}</h3> : '' }
            { description ? <span>{description}</span> : '' }
        </div>
    );
};
const FormHR = (props: any) => {
    const { hr } = props;
    return (
        <div className="form-hr">
            <i />
            <span>{hr}</span>
            <i />
        </div>
    );
};

const Comp = forwardRef((props: any, ref: any) => {
    const { formConfig: propsFormConfig } = props;
    const [form] = Form.useForm();
    const [formConfig, setFormConfig] = useState(propsFormConfig || []);

    (window as any).modalForm = form;

    useEffect(() => {
        setFormConfig(propsFormConfig);
    }, [propsFormConfig]);

    useImperativeHandle(ref, () => ({
        ...form,
        setHidden: (name: string, hidden: boolean) => {
            setFormConfig((pre: any) => pre.reduce((init: any, item: any,) => {
                init.push({
                    ...item,
                    formList: item.formList.reduce((iinit: any, iitem: any) => {
                        if (Array.isArray(name) && name.includes(iitem.name) || typeof name === 'string' && iitem.name === name) {
                            iinit.push({
                                ...iitem,
                                refreshKey: Math.random(),
                                hidden,
                            });
                        } else {
                            iinit.push(iitem);
                        }
                        return iinit;
                    }, []),
                });
                return init;
            }, []));
        },
    }));

	return (
        <Form form={form} className="pro-form-comp" colon={false}>
            <Row gutter={16}>
                {formConfig.map((item: any, index: number) => {
                    const { title, description } = item;
                    return (
                        <Col span={item.span || 24} key={index}>
                            { title || description ? <FormTitle title={title} description={description} /> : '' }
                            <Row>
                                {item.formList.map((iitem: any, iindex: number) => {
                                    const {
                                        rules, required, initialValue, assistant, hr,
                                    } = iitem;
                                    const tipText = typeof iitem.label === 'string' ? iitem.label : iitem.label.props.children[0];
                                    const newRules = required ? [{ required: true, message: `${tipText}不能为空` }] : [];
                                    const newAssistant = assistant || [];
                                    const newInitialValue = (initialValue || [initialValue]);
                                    if (!iitem.hidden) {
                                        return (
                                            <Col
                                                key={item.refreshKey || `${index}-${iindex}`}    
                                                span={iitem.span || 24}
                                            >
                                                { hr ? <FormHR hr={hr} /> : '' }
                                                <Form.Item
                                                    name={iitem.name}
                                                    label={iitem.label}
                                                    key={iindex}
                                                    initialValue={newAssistant.length ? newInitialValue[0] : initialValue}
                                                    rules={[...(rules || []), ...newRules]}
                                                >
                                                    <InnerComp {...iitem} />
                                                </Form.Item>
                                                {
                                                    newAssistant.map((iiitem: any, iiindex: number) => {
                                                        return (
                                                            <Form.Item
                                                                name={iiitem}
                                                                key={iiitem}
                                                                initialValue={newInitialValue[iiindex + 1]}
                                                                style={{ display: 'none' }}
                                                            >
                                                                <Input />
                                                            </Form.Item>
                                                        );
                                                    })
                                                }
                                            </Col>
                                        )
                                    }
                                })}
                            </Row>
                        </Col>
                    )
                })}
            </Row>
        </Form>
	);
});

Comp.displayName = 'recovery-form-modal';

export default Comp;
